<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="项目名称" prop="xmName">
        <el-input v-model="queryParams.xmName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="企业名称" prop="qyName">
        <el-input v-model="queryParams.qyName" placeholder="请输入企业名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['guarantee:agreement:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="agreementList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" prop="id" >
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="业务员" align="center" prop="userName" />
      <el-table-column label="出函类型" align="center" prop="xmChType" />
      <el-table-column label="项目名称" align="center" prop="xmName" />
      <el-table-column label="标段" align="center" prop="xmNameLot" />
      <el-table-column label="出函机构及对接人" align="center" prop="xmChDjuser" />
      <el-table-column label="保函类型" align="center" prop="xmBhType" />
      <el-table-column label="中标金额" align="center" prop="xmMoney" />
      <el-table-column label="企业名称" align="center" prop="qyName" />
      <el-table-column label="返润" align="center" prop="ywFanMoney" />
      <el-table-column label="扣税" align="center" prop="ywTaxMoney" />
      <el-table-column label="业绩" align="center" prop="ywYeji" />
      <el-table-column label="出函日期" align="center" prop="bhDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.bhDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="150" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['guarantee:agreement:edit']">审核</el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改履约保函对话框 -->
    <!-- 添加或修改履约保函对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1360px" append-to-body>
      <el-form ref="form" :inline="true" :model="form" label-width="180px" disabled>
        <!-- 基本信息 -->
        <el-divider content-position="left">基本信息</el-divider>
        <div>
          <el-form-item label="是否补录" prop="isBulu">
            <div class="label_txt">{{ form.isBulu }}</div>
          </el-form-item>
          <el-form-item label="出函类型" prop="xmChType">
            <div class="label_txt">{{ form.xmChType }}</div>
          </el-form-item>
          <el-form-item label="出函机构及对接人" prop="xmChDjuser">
            <div class="label_txt">{{ getBLetterObj(form.xmChDjuser).institution }} ({{ getBLetterObj(form.xmChDjuser).name }})</div>
          </el-form-item>
          <el-form-item label="保函类型" prop="xmBhType">
            <div class="label_txt">{{ form.xmBhType }}</div>
          </el-form-item>
          <el-form-item label="受益人名称" prop="xmSyName">
            <div class="label_txt">{{ form.xmSyName }}</div>
          </el-form-item>
          <el-form-item label="受益人类型" prop="xmSyType">
            <div class="label_txt">{{ form.xmSyType }}</div>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="项目名称" prop="xmName">
            <div class="label_txt">{{ form.xmName }}</div>
          </el-form-item>
          <el-form-item label="项目所在省市" prop="xmShengAndShi">
            <div class="label_txt">{{ form.xmSheng + '/' + form.xmShi }}</div>
          </el-form-item>
          <el-form-item label="项目所在地" prop="xmAddress">
            <div class="label_txt">{{ form.xmAddress }}</div>
          </el-form-item>
        </div>

        <div class="bd_box">
          <el-form-item v-for="(item, index) in form.xmNameLot" :key="index" label="标段" :prop="'xmNameLot.' + index"
            :rules="{
              required: true, message: '请输入', trigger: 'blur'
            }">
            <div class="label_txt">{{ item }}</div>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="是否特殊项目" prop="xmSpecial">
            <div class="label_txt">{{ form.xmSpecial }}</div>
          </el-form-item>

          <el-form-item label="中标时间或合同签署时间" prop="xmDate">
            <div class="label_txt">{{ form.xmDate }}</div>
          </el-form-item>
          <el-form-item label="中标金额" prop="xmMoney">
            <div class="label_txt">{{ form.xmMoney }}</div>
          </el-form-item>
          <el-form-item v-if="xmBhblshow" label="保函比例" prop="xmBhProportion">
            <div class="label_txt">{{ form.xmBhProportion }}</div>
          </el-form-item>
          <el-form-item label="工期" prop="xmGongqi">
            <div class="label_txt">{{ form.xmGongqi }}</div>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="招文" prop="xmArticleUrl">
            <image-upload class="disable_upload" v-model="form.xmArticleUrl" />
          </el-form-item>
          <el-form-item label="中标通知" prop="xmZbUrl">
            <image-upload class="disable_upload" v-model="form.xmZbUrl" />
          </el-form-item>
          <el-form-item label="合同文件" prop="xmContractUrl">
            <image-upload class="disable_upload" v-model="form.xmContractUrl" />
          </el-form-item>
          <el-form-item label="受益人名称依据" prop="xmSyUrl">
            <image-upload class="disable_upload" v-model="form.xmSyUrl" />
          </el-form-item>
          <el-form-item label="项目名称依据" prop="xmXmmcyjUrl">
            <image-upload class="disable_upload" v-model="form.xmXmmcyjUrl" />
          </el-form-item>
          <el-form-item label="保函依据" prop="xmBhyjUrl">
            <image-upload class="disable_upload" v-model="form.xmBhyjUrl" />
          </el-form-item>
          <el-form-item label="工期依据" prop="xmGqyjUrl">
            <image-upload class="disable_upload" v-model="form.xmGqyjUrl" />
          </el-form-item>
        </div>


        <!-- 企业信息 -->
        <el-divider content-position="left">企业信息</el-divider>
        <div>
          <el-form-item label="企业名称" prop="qyName">
            <div class="label_txt">{{ form.qyName }}</div>
          </el-form-item>
          <el-form-item label="企业所在省市" prop="qyShengAndShi">
            <div class="label_txt">{{ form.qySheng + '/' + form.qyShi }}</div>
          </el-form-item>
          <el-form-item label="企业地址" prop="qyAddress">
            <div class="label_txt">{{ form.qyAddress }}</div>
          </el-form-item>
          <el-form-item label="注册资金" prop="qyZcMoney">
            <div class="label_txt">{{ form.qyZcMoney }}</div>
          </el-form-item>
          <el-form-item label="企业成立时间" prop="qyClDate">
            <div class="label_txt">{{ form.qyClDate }}</div>
          </el-form-item>
          <el-form-item label="企业类型" prop="qyType">
            <div class="label_txt">{{ form.qyType }}</div>
          </el-form-item>
          <el-form-item label="企业最高资质" prop="qyZizhi">
            <div class="label_txt">{{ form.qyZizhi }}</div>
          </el-form-item>
          <el-form-item label="特殊情况" prop="qySpecial">
            <div class="label_txt">{{ form.qySpecial }}</div>
          </el-form-item>
          <el-form-item label="发票类型" prop="qySpecial">
            <div class="label_txt">{{ form.qySpecial }}</div>
          </el-form-item>
          <el-form-item label="发票名称" prop="qyKpName">
            <div class="label_txt">{{ form.qyKpName }}</div>
          </el-form-item>
          <el-form-item label="发票税号" prop="qyKpNum">
            <div class="label_txt">{{ form.qyKpNum }}</div>
          </el-form-item>
          <el-form-item label="发票电话" prop="qyKpPhone">
            <div class="label_txt">{{ form.qyKpPhone }}</div>
          </el-form-item>
          <el-form-item label="发票地址" prop="qyKpAddress">
            <div class="label_txt">{{ form.qyKpAddress }}</div>
          </el-form-item>
          <el-form-item label="发票开户行" prop="qyKpBank">
            <div class="label_txt">{{ form.qyKpBank }}</div>
          </el-form-item>
          <el-form-item label="发票开户账号" prop="qyKpBankNum">
            <div class="label_txt">{{ form.qyKpBankNum }}</div>
          </el-form-item>
          <el-form-item label="邮寄地址" prop="qyKpSendAdress">
            <div class="label_txt">{{ form.qyKpSendAdress }}</div>
          </el-form-item>
        </div>

        <!-- 保函信息 -->
        <el-divider content-position="left">保函信息</el-divider>
        <div>
          <el-form-item label="出函类型" prop="xmChType">
            <div class="label_txt">{{ form.xmChType }}</div>
          </el-form-item>
          <el-form-item label="出函机构及对接人" prop="xmChDjuser">
            <div class="label_txt">{{ getBLetterObj(form.xmChDjuser).institution }} ({{ getBLetterObj(form.xmChDjuser).name }})</div>
          </el-form-item>
          <el-form-item label="保函金额" prop="bhMoney">
            <div class="label_txt">{{ form.bhMoney }}</div>
          </el-form-item>
          <el-form-item label="特殊要求" prop="bhRemark">
            <div class="label_txt">{{ form.bhRemark }}</div>
          </el-form-item>
          <el-form-item label="保函格式" prop="bhGeshi">
            <div class="label_txt">{{ form.bhGeshi }}</div>
          </el-form-item>
          <el-form-item label="格式上传" prop="bhGeshiUrl">
            <file-upload class="disable_upload" v-model="form.bhGeshiUrl" />
          </el-form-item>
        </div>

        <!-- 费用信息 -->
        <el-divider content-position="left">费用信息</el-divider>
        <div>
          <el-form-item label="收费" prop="fkMoney">
            <div class="label_txt">{{ form.fkMoney }}</div>
          </el-form-item>
          <el-form-item label="有无合作方费用" prop="isBulu">
            <div class="label_txt">{{ form.isBulu }}</div>
          </el-form-item>
          <el-form-item v-if="fkHzShow" label="合作方费用" prop="fkHzMoney">
            <div class="label_txt">{{ form.fkHzMoney }}</div>
          </el-form-item>
          <el-form-item v-if="fkHzShow" label="合作方付款" prop="fkHzUrl">
            <div class="label_txt">{{ form.fkHzUrl }}</div>
          </el-form-item>
          <el-form-item label="公司收益" prop="fkShouyi">
            <div class="label_txt">{{ form.fkShouyi }}</div>
          </el-form-item>
          <el-form-item label="返润扣税" prop="fkFanrun">
            <div class="label_txt">{{ form.fkFanrun }}</div>
          </el-form-item>
          <el-form-item label="业绩" prop="ywYeji">
            <div class="label_txt">{{ form.ywYeji }}</div>
          </el-form-item>
          <el-form-item label="付款方式" prop="fkType">
            <div class="label_txt">{{ form.fkType }}</div>
          </el-form-item>
          <el-form-item label="付款凭证" prop="fkUrl">
            <file-upload class="disable_upload" v-model="form.fkUrl" />
          </el-form-item>
        </div>

        <!-- 运营 -->
        <el-divider content-position="left">运营</el-divider>

        <el-form-item label="受理意见" prop="yyAcceptanceOpinion">
          <div class="label_txt">{{ form.yyAcceptanceOpinion }}</div>
        </el-form-item>
        <el-form-item label="价格" prop="yyPrice">
          <div class="label_txt">{{ form.yyPrice }}</div>
        </el-form-item>
        <el-form-item label="特殊备注" prop="yySpecialRemark">
          <div class="label_txt">{{ form.yySpecialRemark }}</div>
        </el-form-item>
        <el-form-item label="资料包是否合格" prop="yyContractHg">
          <div class="label_txt">{{ form.yyContractHg }}</div>
        </el-form-item>
        <el-form-item label="补充文件描述" prop="yySupplyRemark">
          <div class="label_txt">{{ form.yySupplyRemark }}</div>
        </el-form-item>
        <el-form-item label="反担保签署" prop="yyFandanbaoqianshu">
          <div class="label_txt">{{ form.yyFandanbaoqianshu }}</div>
        </el-form-item>
        <el-form-item label="邮寄单号" prop="yyYoujidanhao">
          <div class="label_txt">{{ form.yyYoujidanhao }}</div>
        </el-form-item>
        <el-form-item label="总费用" prop="ywTotalMoney">
          <div class="label_txt">{{ form.ywTotalMoney }}</div>
        </el-form-item>
        <el-form-item label="银行成本" prop="bankMoney">
          <div class="label_txt">{{ form.bankMoney }}</div>
        </el-form-item>
        <el-form-item label="银行收款账户" prop="bankAccount">
          <div class="label_txt">{{ form.bankAccount }}</div>
        </el-form-item>
        <el-form-item label="是否收到" prop="bankSf">
          <div class="label_txt">{{ form.bankSf }}</div>
        </el-form-item>
        <el-form-item label="银行成本2" prop="bankMoney2">
          <div class="label_txt">{{ form.bankMoney2 }}</div>
        </el-form-item>
        <el-form-item label="银行账户2" prop="bankAccount2">
          <div class="label_txt">{{ form.bankAccount2 }}</div>
        </el-form-item>
        <el-form-item label="是否收到2" prop="bankSf2">
          <div class="label_txt">{{ form.bankSf2 }}</div>
        </el-form-item>
        <el-form-item label="返润" prop="ywFanMoney">
          <div class="label_txt">{{ form.ywFanMoney }}</div>
        </el-form-item>
        <el-form-item label="扣税" prop="ywTaxMoney">
          <div class="label_txt">{{ form.ywTaxMoney }}</div>
        </el-form-item>
        <el-form-item label="是否开票" prop="sfKp">
          <div class="label_txt">{{ form.sfKp=='1'?'是':'否' }}</div>
        </el-form-item>
        <el-form-item label="出函日期" prop="bhDate">
          <div class="label_txt">{{ form.bhDate }}</div>
        </el-form-item>
        <el-form-item label="邮寄单号" prop="mailNum">
          <div class="label_txt">{{ form.mailNum }}</div>
        </el-form-item>
        <div>
          <el-form-item label="补充资料" prop="yySupplyUrl">
            <file-upload class="disable_upload" v-model="form.yySupplyUrl" />
          </el-form-item>
          <el-form-item label="签约资料包" prop="yyContractData">
            <file-upload class="disable_upload" v-model="form.yyContractData" />
          </el-form-item>
        </div>
      </el-form>
      <el-form ref="checkform" :inline="true" :model="checkform" label-width="180px">
        <!-- 审核信息 -->
        <el-divider content-position="left">审核信息</el-divider>
        <div>
          <el-form-item label="审核状态:">
            <el-radio-group  prop v-model="checkform.status">
              <el-radio :label="6">通过</el-radio>
              <el-radio :label="-1">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见" prop="checkMind" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
            <el-input v-model="checkform.checkMind" placeholder="请输入审核意见" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  yyzList,
  getAgreement,
  checkSave
} from "@/api/guarantee/agreementCheck";
import { pcTextArr } from "element-china-area-data";
import {getBLetterList} from "@/api/guarantee/letter";

export default {
  name: "Agreement",
  data() {
    return {
      // 合作方费用显示
      fkHzShow: false,
      // 保函比例显示
      xmBhblshow: false,
      // 省市数据
      areaData: pcTextArr,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      bLetters:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 履约保函表格数据
      agreementList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        xmChDjuser: null,
        xmName: null,
        qyName: null
      },
      // 表单参数
      form: {},
      // 审核表单参数
      checkform:{}
    };
  },
  created() {
    this.getList();
    this.getBLetters();
  },
  methods: {
    getBLetters(){
      getBLetterList().then(response => {
        this.bLetters = response.data;
      });
    },
    getBLetterObj(id){
      if(id && this.bLetters.length>0){
        return  this.bLetters.filter(item => item.id == id)[0]
      }else{
        return ''
      }
    },
    /** 有无合作方费用修改 */
    fkHzChange(val) {
      if (val === '有') {
        this.fkHzShow = true
      } else {
        this.fkHzShow = false
      }
    },
    /** 保函类型修改 */
    typeChange(val) {
      if (val === '履约' || val === '预付款') {
        this.xmBhblshow = true
      } else {
        this.xmBhblshow = false
      }
    },
    /** 删除标段 */
    deleteLot(index) {
      this.form.xmNameLot.splice(lvyue, 1)
    },
    /** 添加标段 */
    addLot() {
      this.form.xmNameLot.push('')
    },
    /** 企业省市修改 */
    handleQyAreaChange(value) {
      this.form.qySheng = value[0]
      this.form.qyShi = value[1]
    },
    /** 省市修改 */
    handleAreaChange(value) {
      this.form.xmSheng = value[0]
      this.form.xmShi = value[1]
    },
    /** 查询履约保函列表 */
    getList() {
      this.loading = true;
      yyzList(this.queryParams).then(response => {
        this.agreementList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        wxx: null,
        status: null,
        xmChType: null,
        xmChDjuser: null,
        xmBhType: null,
        xmSyName: null,
        xmSyType: null,
        xmName: null,
        xmNameLot: [''],
        xmShengAndShi: null,
        xmSheng: null,
        xmShi: null,
        xmAddress: null,
        xmType: null,
        xmSpecial: null,
        xmSpecialName: null,
        xmDate: null,
        xmMoney: null,
        xmBhProportion: null,
        xmGongqi: null,
        xmArticleUrl: null,
        xmZbUrl: null,
        xmContractUrl: null,
        xmSyUrl: null,
        xmXmmcyjUrl: null,
        xmBhyjUrl: null,
        xmGqyjUrl: null,
        qyName: null,
        qyShengAndShi: null,
        qySheng: null,
        qyShi: null,
        qyAddress: null,
        qyZcMoney: null,
        qyClDate: null,
        qyType: null,
        qyZizhi: null,
        qySpecial: null,
        qyFpType: null,
        qyKpName: null,
        qyKpNum: null,
        qyKpPhone: null,
        qyKpAddress: null,
        qyKpBank: null,
        qyKpBankNum: null,
        qyKpSendAdress: null,
        bhMoney: null,
        bhGeshi: null,
        bhGeshiUrl: null,
        bhRemark: null,
        fkMoney: null,
        fkType: null,
        fkUrl: null,
        fkHzMoney: null,
        fkHzUrl: null,
        fkHzType: null,
        fkShouyi: null,
        fkFanrun: null,
        yyAcceptanceOpinion: null,
        yyPrice: null,
        yySupplyUrl: null,
        yySpecialRemark: null,
        yyContractData: null,
        yyContractHg: null,
        yySupplyRemark: null,
        yyFandanbaoqianshu: null,
        yyYoujidanhao: null,
        ywTotalMoney: null,
        bankMoney: null,
        bankAccount: null,
        bankSf: null,
        bankMoney2: null,
        bankAccount2: null,
        bankSf2: null,
        ywFanMoney: null,
        ywTaxMoney: null,
        ywYeji: null,
        sfKp: null,
        bhDate: null,
        mailNum: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
      this.checkform={
        id:null,
        status:null,
        checkMind:null
      }
      this.resetForm("checkform");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 审核按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getAgreement(id).then(response => {
        this.form = response.data;
        this.checkform.id=id;
        this.open = true;
        this.title = "修改履约保函";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["checkform"].validate(valid => {
        console.log(valid,'valid')
        if (valid) {
          console.log(this.checkform,'this.checkform')
          if (this.form.id != null) {
            checkSave(this.checkform).then(response => {
              this.$modal.msgSuccess("审核成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('guarantee/agreement/export', {
        ...this.queryParams
      }, `agreement_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style lang="scss" scoped>
.my_select {
  width: 204px;
}

.my_picker {
  width: 204px;
}

.lotInput {
  width: 150px;
  margin-right: 10px;
}

.bd_box {
  display: flex;
  flex-wrap: wrap;
}

.disable_upload ::v-deep .el-upload--picture-card,.disable_upload ::v-deep .upload-file-uploader, .disable_upload::v-deep .ele-upload-list__item-content-action{
  display: none
}

.label_txt {
  width: 204px
}
</style>
